<template>
  <div class="chart-item-container">
    <div v-if="loading" class="loading"></div>
    <div ref="fullYearSalesChart" class="chart-item"></div>
  </div>
</template>

<script setup name="FullYearSalesChart">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import useEcharts from '/@/utils/useEcharts'
import {usesStatisticsApi} from "/@/api/useAutoApi/statistics";
import * as echarts from 'echarts';


const months = [
  '1周',
  '2周',
  '3周',
  '4周',
  '5周',
  '6周',
  '7周',
  '8周',
  '9周',
  '10周',
  '11周',
  '12周',
]
const loading = ref(true)
const fullYearSalesChart = ref(null)
let chartInstance = null;
let data = reactive({ api_count: [], ui_count: [] });

const caseResultWeekSum = async () => {
  const fetchData =  await usesStatisticsApi().getCaseResultWeekSum()
  Object.assign(data, fetchData.data);
}

const computeDataMax = () => {
  // 计算 api_count 和 ui_count 中的最大值
  const allData = [...data.api_count, ...data.ui_count];
  return Math.max(...allData) || 100;
};

const init = () => {
  const option = {
    color: ['rgba(64, 58, 255)'],
    grid: {
      top: '5%',
      left: '2%',
      right: '2%',
      bottom: '4%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#98A3B2',
          width: 0,
          type: 'solid',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      max: computeDataMax(),
      splitLine: { show: false },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#98A3B2',
          width: 0,
          type: 'solid',
        },
      },
    },
    series: [
      {
        type: 'line',
        name: 'API用例执行数',
        stack: '总量',
        data: data.api_count || [],
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          width: 5,
          shadowColor: '#b2b0b0', // 设置折线阴影
          shadowBlur: 10,
          shadowOffsetY: 5,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 1, color: '#91cc75' }]),
        },
      },
      {
        type: 'line',
        name: 'UI用例执行数',
        stack: '总量2',
        data: data.ui_count || [],
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          width: 5,
          shadowColor: '#cec7c7', // 设置折线阴影
          shadowBlur: 10,
          shadowOffsetY: 5,
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 1, color: '#5470c6' }]),
        },
      },
    ],
  };

  nextTick(() => {
    if (fullYearSalesChart.value) {
      chartInstance = useEcharts(fullYearSalesChart.value);

      try {
        chartInstance.setOption(option);
        loading.value = false;
      } catch (error) {
        console.error('设置option失败:', error);
      }
    }
  });
};

const updateChart = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

onMounted(async () => {
  await caseResultWeekSum();
  init();
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

defineExpose({
  loading,
  fullYearSalesChart,
  updateChart,
});
</script>

<style lang="scss" scoped>
.chart-item-container {
  width: 100%;

  .chart-item {
    height: 29vh;
  }
}
</style>
